<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第二步：引入css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--第三步：引入js-->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body style="position: relative;">
<div id="wrapper" style="background: #ffffff">
    <header style="padding-top: .0rem">
        <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html"><img class="back" src="images/icon_back_n.png"></a>
        <div class="title" style="width: 1rem"><p>购物车</p></div>
        <span class="icon_search"><img src="images/search.png"></span>
    </header>
    <div class="bg" style=";width: 2rem;height: 2rem;margin: 2rem auto"><img style="width: 2.2rem;height: 2rem;margin: 0 auto;display: block" src="images/gouwuchebg.png"/></div>
    <div class="bigshangpin" style="width: 90%;height: 1rem;margin: -.10rem auto;display: flex">
        <!--<a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html"><div class="quanbushangpin">-->
            <!--<span style="font-size: .3rem;text-align: center;line-height: 1rem;">-->
            <!--<p style="text-align: center;"><strong>全部商品</strong></p></span>-->
        <!--</div></a>-->
        <!--<a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html"><div class="jingxuanshangpin">-->
            <!--<span style="font-size: .3rem;text-align: center;line-height: 1rem;">-->
            <!--<p style="text-align: center;"><strong>精选商品</strong></p></span></div></a>-->
        <button style="flex: 1">全部商品</button>
        <button style="flex: 1;background: orangered">精选商品</button>
    </div>

</div>

</body>
</html>
<footer>
    <!--商城-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">商城</p>

        </section>

    </a>
    <!--分类-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%88%86%E7%B1%BB.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">分类</p>

        </section>

    </a>
    <!--购物车-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%B4%AD%E7%89%A9%E8%BD%A6.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">购物车</p>

        </section>

    </a>
    <!--服务-->
    <a href="http://localhost:63342/5.3/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.html" style="background: red;width: 2rem;height: 2rem">
        <section>
            <span style="font-size: .4rem;padding-top: .1rem;color: orange" class="glyphicon glyphicon-list-alt"></span>
            <p class="p4" style="color: gray;font-size: .2rem;">服务</p>

        </section>

    </a>
</footer>

<script>
    $(function()
    {
        function fullwidth()
        {
            if($('body').width() >= 720)
            {
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 720;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function()
        {
            fullwidth();
        })
    });
</script>